<script setup lang="ts">
import { onBeforeMount,onMounted, onUnmounted, ref,nextTick, h} from 'vue';
// import HelloWorld from './components/HelloWorld.vue'
import { BorderBox9,BorderBox7,Decoration5 } from '@dataview/datav-vue3';
import dayjs from 'dayjs';
//native组件导入
import { NButton,NIcon,NTabPane,NRow,NCol,NStatistic,useDialog, useMessage,NMessageProvider,NDialogProvider} from 'naive-ui'
import {BonfireSharp,Water,MegaphoneOutline} from '@vicons/ionicons5'
import { useThrottleFn } from '@vueuse/core'
//图表导入(按需导入)
// import * as echarts from 'echarts/core';
// import { GridComponent } from 'echarts/components';
// import { LineChart } from 'echarts/charts';
// import { UniversalTransition } from 'echarts/features';
// import { CanvasRenderer } from 'echarts/renderers';
// echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
//图表完全导入
import * as echarts from 'echarts';
// import { ipcRenderer } from 'electron';

//实时显示时间  
const currentTime = ref<string>(new Date().toLocaleString());
let timerId:number|undefined | NodeJS.Timeout;
const updateTime = () => {
  currentTime.value = new Date().toLocaleString();
};
onMounted(() => {
  timerId = setInterval(updateTime, 1000);
});
onUnmounted(() => {
  if (timerId !== undefined) {
    clearInterval(timerId);
  }
});

//温度
const chartRefw = ref<HTMLDivElement | null>(null);
onMounted(async () => {
  await nextTick(); // 确保 DOM 更新完成
  if (chartRefw.value) {
    const chartInstance = echarts.init(chartRefw.value);
    const option = {
      title: {
        text: '温度变化折线图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['温度']
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2025-03-01', '2025-03-02', '2025-03-03', '2025-03-04', '2025-03-05', '2025-03-06', '2025-03-07']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 40,
        interval: 10,
        axisLabel: {
          formatter: '{value} °C'
        }
      },
      series: [
        {
          name: '温度',
          type: 'line',
          data: [22, 25, 18, 20, 28, 30, 23],
          markLine: {
            data: [
              { type: 'average', name: '平均温度' }
            ]
          }
        }
      ]
    };
    chartInstance.setOption(option);
  } else {
    console.error('Chart container not found');
  }
});

//湿度
const chartRefs = ref<HTMLDivElement | null>(null);
onMounted(async () => {
  await nextTick(); // 确保 DOM 更新完成
  if (chartRefs.value) {
    const chartInstance = echarts.init(chartRefs.value);
    const option = {
      title: {
        text: '湿度变化折线图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['湿度']
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2025-03-01', '2025-03-02', '2025-03-03', '2025-03-04', '2025-03-05', '2025-03-06', '2025-03-07']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 40,
        interval: 10,
        axisLabel: {
          formatter: '{value} °C'
        }
      },
      series: [
        {
          name: '湿度',
          type: 'line',
          data: [22, 25, 18, 20, 28, 30, 23],
          markLine: {
            data: [
              { type: 'average', name: '平均湿度' }
            ]
          }
        }
      ]
    };
    chartInstance.setOption(option);
  } else {
    console.error('Chart container not found');
  }
});

//下发命令

const dialogInstance = ref();

const variableValue = ref('等待更新...');
const message = useMessage()
const dialog = useDialog()
const handleConfirm = ()=> {
  console.log('dialogInstance.value', dialogInstance.value)
  if (dialogInstance.value) {
    return;
  }
  dialogInstance.value = dialog.warning({
    title: '警告',
    content:()=>{return h(NIcon, { size: 50,color:'orange' }, () => [h(BonfireSharp), 'test'])},
    positiveText: '确定',
    draggable: true,
    onPositiveClick: () => {
      message.success('确定')
    },
    onClose: () => {
      message.error('不确定')
      dialogInstance.value = null;
    }
  })
}
//节流函数
const throttledHandleConfirm = useThrottleFn(handleConfirm, 10000)
onMounted(() => {
  window.ipcRenderer.on('variable-update', (event, value) => {
    variableValue.value = value;
    // console.log('value',value)
    if(value === '"00 01 00 00 00 00 00 00 00 00"'){
      // console.log('现场有火警!尽快采取措施')
      throttledHandleConfirm()
    }else{
      // console.log('value',value,'当前没有火警')
    }
  });
});



//接收到指令




  
</script>

<template>
  <div class="background_01">
    <!--需要封装代码header-->
    <header>
      <div class="timew">{{ currentTime }}</div>
      <img class="hb" src="@/assets/header.png"></img>
      <img class="hw" src="@/assets/tcdmhzz.png"></img>
      <div class="hd"><Decoration5 :color="['#13a3d3','#13a3d3']" style="width:300px; height:40px;color: blueviolet;" /></div>
    </header>
    <main>
      <BorderBox9 :color="['#073253']"  style="height: 400px;margin: 10px;padding: 10px;">数据看板</BorderBox9>
      <BorderBox9 :color="['#073253']"  style="height: 400px;margin: 10px;padding: 10px;">视频面板</BorderBox9>
      <BorderBox9 :color="['#073253']"  style="height: 400px;margin: 10px;padding: 10px;">
      <div>
        <!--状态显示-->
        <div>设备状态</div>
        <div style="display: flex;flex-direction: row;">
          <span style="display: flex;flex-direction: column;margin-right: 20px;">
            <!--时间发生时变红色-->
            <n-icon size="50">
              <BonfireSharp />
            </n-icon>
            <p>火灾报警</p>
          </span>
          <span style="display: flex;flex-direction: column;;margin-right: 20px;">
            <!--时间发生时变蓝色-->
            <n-icon size="50">
              <Water />
            </n-icon>
            <p>水系统</p>
          </span>
          <span style="display: flex;flex-direction: column;">
            <!--时间发生时变橙色-->
            <n-icon size="50">
              <MegaphoneOutline />
            </n-icon>
            <p>喇叭</p>
          </span>
        </div>
      </div>
      <!--状态显示-->
        <div>
          <div>控制按钮</div>
        <div>
          <div>
            <n-button type="primary">火警复位</n-button>
            <n-button type="primary">火警复位</n-button>
            <n-button type="primary">模拟火警</n-button>
          </div>
          <div>
            <n-button type="primary">打开阀门</n-button>
            <n-button type="primary">关闭阀门</n-button>
          </div>
          <div>
            <n-button type="primary">打开警报</n-button>
            <n-button type="primary">关闭警报</n-button>
          </div>
        </div>
        </div>
      </BorderBox9>
    </main>
    <footer>
      <BorderBox7 style="height: 300px;margin: 10px;padding: 10px;">温度:这里显示图表，目前都是模拟数据。
        <div ref="chartRefw" style="height: 100%;width: 100%;"></div>
      </BorderBox7>
      <BorderBox7 style="height: 300px;margin: 10px;padding: 10px;">湿度:这里显示温度，目前都是模拟数据。
        <div ref="chartRefs" style="height: 100%;width: 100%;"></div>
      </BorderBox7>
      <BorderBox7 style="height: 300px;margin: 10px;padding: 10px;">历史数据
        <div>
          {{ variableValue }}
        </div>
      </BorderBox7>
    </footer>
      </div>
</template>

<style scoped lang="scss">
.background_01{
  width: 100vw; /* 视窗宽度 */ 
  height: 100vh; /* 视窗高度 */ 
  background-color: #010619;
  color: aliceblue;
}
header{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items:center;
}
.hb{
  width: 100%;
}
.hw{
  position: absolute;
  top:30px;
  width: 300px;
  height: 30px;
}
.hd{
  position: absolute;
  top:80px;
}
.timew{
  position: absolute;
  top:80px;
  left: 20px;
  font-size: 20px;
}
main{
  width: 100%;
  display: flex;
  flex-direction:row;
  justify-content: center;
}
footer{
  width: 100%;
  display: flex;
  flex-direction:row;
  justify-content: center;
}
.n-button{
  margin: 10px;
}
</style>
